<template>
  <view class="income-info">
    <view class="info-count">
        <view>
            <view>{{data.userCount }}</view>
            <view>订单次数</view>
        </view>
        <view>
            <view>{{ data.incomeSolid/ 100  }}</view>
            <view>实际收益</view>
        </view>
        <view>
            <view>{{ data.incomeExpected /100}}</view>
            <view>预估收益</view>
        </view>
    </view>

    <view class="tabs-info">
        <view class="tabs"><fui-tabs center  :tabs="tabs" @change="change"></fui-tabs></view>
        <view @click="iconIndex === 0 ? iconIndex = 1 : iconIndex = 0"><fui-icon  size="35" :name="iconName[iconIndex]"></fui-icon> 筛选</view>
    </view>

    <view v-if="iconIndex === 1" class="screen">
        <view @click="showPopup = true" class="screen-item">
            <fui-icon :size="screenSize" name="calendar"></fui-icon>
            <view>{{timeArray.length > 0 ? `${timeArray[0]}~${timeArray[1]}` : `请选择日期` }}</view>
            <fui-icon :size="screenSize" name="turningdown"></fui-icon>
        </view>
        <view v-if="tabIndex === 0"  class="screen-item">
            <fui-icon :size="screenSize" name="search"></fui-icon>
            <view @click="bubbleShow = true">{{showCode}}</view>
            <fui-bubble-box top="850" left="100" background="#4c4c4c" color='#fff' lineColor="#666" :items="items" 
            :show="bubbleShow" @click="itemClick" @close="bubbleShow = false"></fui-bubble-box>
            <fui-icon @click="showCode = '请现在关键字'" size="35" name="clear"></fui-icon>
            <fui-icon :size="screenSize" name="turningdown"></fui-icon>
        </view>

    
        <view class="team-info">
            <view  class="team-item  r-b">
                <view>{{ incomeInfo.userCount ?? 0 }}</view>
                <view class="team-title">订单次数</view>
            </view>
            <view class="team-item r-b">
                <view>{{ (incomeInfo.incomeExpected / 100).toFixed(2) ?? 0}}</view>
                <view class="team-title">预估收益</view>
            </view>
            <view class="team-item ">
                <view>{{(incomeInfo.incomeSolid / 100).toFixed(2) ?? 0}}</view>
                <view class="team-title">实际收益</view>
            </view>
        </view>


    </view>
    <fui-bottom-popup :show="showPopup" @close="showPopup = false">
        <fui-calendar type="3" showLunar @change="changeCalendar"></fui-calendar>
        <view @click="showClick" class="popup-but">确定</view>
    </fui-bottom-popup>

    <view class="info-item" v-if="tabIndex === 0">
            <view v-if="incomes" class="income" v-for="item in incomes" :key="item.name">
                <image  class="img" :src="item.image" />
                <view>
                    <view class="income-title">
                    <view> {{item.name}}</view>
                    <view> {{user.code}}</view>
                </view>
                <view class="income-title income-body">
                    <view><fui-icon size="30" name="pulldown"></fui-icon>   订单次数:  {{item.promotionCount}}</view>
                    <view><fui-icon size="30" name="aftersale"></fui-icon>  实际收益: {{item.totalIncome / 100}}</view>
                </view>
                </view>
            </view>

            <NoData v-else />
            

    </view>


    <view class="info-item" style="margin-top: 20rpx;" v-else>
            <view class="item-body" v-if="incomes"  v-for="item in dataList" :key="item.name">
                <view class="income" style="border: none;margin-bottom: 0;margin-top: 0; padding-bottom: 0;">
                    <image  class="img" :src="item.image" />
                    <view>
                        <view class="income-title income-count">
                            <view> {{item.name}}</view>
                            <view class="count-money"> {{(item.totalIncome ? item.totalIncome / 100 : item.income /100 ?? 0 ).toFixed(2)}}</view>
                        </view>
                        <view class="income-title">
                            <view class="title-time">{{item.createdTime ?? item.createTime}}</view>
                            <view>实际金额</view>
                        </view>
                    </view>
                </view>
                <view class="team-info">
                    <view class="team-item  r-b">
                        <view>{{item.promotionCount ? item.promotionCount : item.countNum ?? 0}}</view>
                        <view class="team-title">订单次数</view>
                    </view>
                    <view class="team-item r-b">
                        <view>{{(item.estimate / 100).toFixed(2)}}</view>
                        <view class="team-title">预估收益</view>
                    </view>
                    <view class="team-item ">
                        <view>{{(item.totalIncome ? item.totalIncome / 100 : item.income /100 ?? 0 ).toFixed(2)}}</view>
                        <view class="team-title">实际收益</view>
                    </view>
                </view>

            </view>

            <NoData v-else />
            

    </view>


  </view>
</template>

<script setup lang="ts">
import dyUserPlayingService from "@/api/dyUserPlayingService";
import type{IGetUserIncomeResponse} from "@/api/model/dyUserCodeModel";
import userStore from "@/store/user";
import NoData from "@/components/NoData/NoData.vue";
const data = ref<IGetUserIncomeResponse>({
    userCount:0,
    incomeSolid:0,
    incomeExpected:0
})

const tabs = ref(['收益明细','收益汇总'])
const tabIndex = ref(0)
const iconName = ref(['classify','classify-fill'])
const iconIndex = ref(0)
const showPopup = ref(false)
const bubbleShow = ref(false)
const screenSize = ref(28)
const incomes = ref()
const showCode  = ref('请现在关键字')
const user = userStore()
const timeArray = ref([])
const pageNo = ref(1)
const pageSize = ref(10)
const dataList = ref()
const incomeInfo = ref({
    incomeExpected:0,
        incomeSolid:0,
        userCount:0
})
const items = ref([
    {
        text: user.code,
    }
])

const getUserIncome = async()=>{
    const {success,result}  = await dyUserPlayingService.getUserIncome()
    if(success){
        data.value =result
    }
}

const itemClick = ()=>{
    showCode.value = user.code
    bubbleShow.value = false
}

const changeCalendar = (e:any)=>{
    console.log(e.value)
    timeArray.value = e.value
}

const getInComeInfo = async ()=>{
    const {success,result}  =  await dyUserPlayingService.getInComeInfo()
    if(success){
        incomes.value = result
    }
}
const getInComeInfoByTime = async()=>{
    const param = {
        pageNo:pageNo.value,
        pageSize:pageSize.value,
        code:showCode.value !== "请现在关键字" ? showCode.value : null,
        startTime :timeArray.value[0],
        endTime : timeArray.value[1]
    }
    const {success,result} = await dyUserPlayingService.getInComeInfoByTime(param)
    if(success){
        incomes.value = result.dataList
        incomeInfo.value = result.income
    }
}
const getInComeCountByTime = async()=>{
    let param = {
        pageNo:pageNo.value,
        pageSize:pageSize.value,
        startTime :timeArray.value[0],
        endTime : timeArray.value[1]
    }
    const {success,result} = await dyUserPlayingService.getInComeCountByTime(param)
    if(success){
        dataList.value = result.dataList
        incomeInfo.value = result.income
    }
}
const change = (e:any)=>{
    tabIndex.value = e.index
    pageNo.value = 0
    showCode.value = '请现在关键字'
    timeArray.value = []
    tabIndex.value === 0 ? getInComeInfoByTime() : getInComeCountByTime()
}

const showClick = ()=>{
    tabIndex.value === 0 ? getInComeInfoByTime() : getInComeCountByTime()
    showPopup.value = false
}

onMounted(async()=>{
   await getUserIncome()
   await getInComeInfo()
})

</script>

<style lang="scss" scoped>
.income-info{
    .info-count{
        background: rgb(100,83,212);
        display: flex;
        justify-content: space-between;
        border-radius: 20rpx;
        font-size: 25rpx;
        padding: 20rpx;
        color: white;
        view{
            text-align: center;
            padding:5rpx 0;
        }
    }
    .popup-but{
        padding: 15rpx 0;
        width: 50%;
        margin: 0 auto;
        background-color: rgb(100,83,212);
        color: white;
        text-align: center;
        border-radius: 20rpx;
        margin-bottom: 28rpx;
    }
    .tabs-info{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .tabs{
            width: 50%;
        }
    }

    .screen{
        background: #6f5ce3;
        padding: 28rpx;
        border-radius: 20rpx;
        margin-top: 28rpx;
        .screen-item{
            display: flex;
            align-items: center;
            background-color: white;
            margin-bottom: 25rpx;
            padding: 20rpx;
            border-radius: 10rpx;
            view{
                width: 90%;
                margin-left: 20rpx;
            }
        }
        .team-item{
            color: white;
        }
        
    }

    .team-info{
            display: flex;
            justify-content: space-between;
            .team-item{
            font-size: 28rpx;
            text-align: center;
            margin-top: 30rpx;
            width: 33%;
            .team-title{
                font-size: 23rpx;
                margin-top: 6rpx;
            }
            }
            .r-b{
                border-right: solid 1rpx $uni-border-color;
            }
        }

    .info-item{
        margin-bottom: 100rpx;
        .item-body{
            background: linear-gradient(to bottom, rgb(240, 238, 255), rgba(248, 247, 255, 0));
            border-radius: 20rpx;
            border: 1rpx solid $uni-border-small-color;
            margin-bottom: 20rpx;
            padding-bottom: 10rpx;
            .team-item{
                color: black;
                .team-title{
                    color: $uni-text-color-disable;
                }
            }
        }
        .income{
            background: white;
            padding: 20rpx;
            padding-right: 0;
            margin: 20rpx 0;
            border-radius: 20rpx;
            display: flex;
            font-size: 26rpx;
            align-items: center;
            border: 1rpx solid $uni-border-small-color;
            .img{
                border-radius: 20rpx;
                width: 120rpx;
                height: 120rpx;
            }
            .income-title{
                display: flex;
                justify-content: space-between;
                width: 500rpx;
                margin:0 20rpx;
                view{
                    margin-bottom: 20rpx;
                }
                .title-time{
                    color: $uni-text-color-disable;
                }
            }
            .income-count{
                font-weight: bolder;
                .count-money{
                    color: rgb(111,92,227);
                }
            }
            .income-body{
                color: rgb(111,92,227);
                height: 40rpx;
                background: rgb(239,237,250);
                line-height: 40rpx;
                padding: 4rpx 10rpx;
                font-size: 23rpx;
                border-radius: 20rpx;
                

            }
        } 
    }   

}

</style>
